<template>
    <div class="todo-list">
        <div>
            <label>新增待办:</label>
            <input v-model="state.todo">
            <button @click="handleAddTodo">保存</button>
        </div>
        <div>
            <h3>待办列表</h3>
            <ul>
                <li v-for="(item, index) in todos" :key="index" @click="handleChangeStatus(item,true)">
                    <input type="checkbox" />
                    <label>{{item.text}}</label>
                </li>
            </ul>
        </div>
        <div>
            <h3>已办列表</h3>
            <ul>
                <li v-for="(item, index) in dones" :key="index" @click="handleChangeStatus(item,false)">
                    <input type="checkbox" checked />
                    <label>{{item.text}}</label>
                </li>
            </ul>
        </div>

        <!-- <button @click="getPath('/recurrentCom')">递归组件</button> -->
    </div>
</template>
<script lang="ts">
// 在2 中的data在3 中被reactive代替
import { reactive,computed } from "vue";
import { useRouter } from "vue-router";
export default {
    // setup 相当于2中的beforeCreate和created，是3新增的属性，所有操作都在此属性中完成
    setup(props, content){
        // 通过reactive可以初始化一个响应式数据,与2中的Vue.observer很相似
        const state = reactive({
            todo:'你是谁',
            todoList:[
                {id:1,done:false,text:'吃饭'},
                {id:2,done:false,text:'睡觉'},
                {id:3,done:false,text:'打豆豆'}
            ]
        })

        // 使用计算属性生成待办列表
        const todos = computed(()=>{
            return state.todoList.filter(item => !item.done)
        });
        // 使用计算属性生成已办列表
        const dones = computed(()=>{
            return state.todoList.filter(item => item.done)
        });
        // 新增待办项
        const handleAddTodo = ()=>{
            if (!state.todo) {
                alert('请输入待办事项!');
                return;
            };
            state.todoList.push({
                id:state.todoList.length + 1,
                done:false,
                text:state.todo
            })
            state.todo = '';
        }
        // 改变待办项
        const handleChangeStatus = (item,status) => {
            item.done = status;
        }
        getPath(url){
            this.$router.push({path:url});
        }
        // 在Vue3.0中，所有的数据和方法都通过在setup 中 return 出去，然后在template中使用
        return {
            state,
            todos,
            dones,
            handleAddTodo,
            handleChangeStatus,
            // getPath,
        }
    }
}
</script>
<style scoped>
.todo-list{
  text-align: center;
}
.todo-list ul li {
  list-style: none;
}
</style>